import React, {PureComponent} from 'react';
import {StyleSheet, View, Image, Text, TouchableWithoutFeedback} from 'react-native';
import utils from '../../../common/utils';

const width = utils.getScreen().width;
export default class extends PureComponent {
    render() {
        const {item, navigation} = this.props;
        return (
            <TouchableWithoutFeedback onPress={() => {
                navigation.navigate('articleDetail', {id: item.id});
            }}>
                <View style={[styles.item]}>
                    <Image source={{uri: item.thumb}} style={[styles.img]}/>
                    <View style={styles.info}>
                        <View style={styles.infoTop}>
                            <View style={styles.maskList}>
                                <View style={styles.maskWrap}>
                                    <Text style={styles.mask}>豆芽精品</Text>
                                </View>
                            </View>
                            {item.maskList ?
                                <View style={styles.maskList}>
                                    {
                                        item.maskList.map((item, index) => {
                                            return (
                                                <View style={styles.maskWrap} key={index}>
                                                    <Text style={styles.mask}>{item}</Text>
                                                </View>
                                            );
                                        })
                                    }
                                </View>
                                : null
                            }
                            <View style={styles.readNumWrap}>
                                <Image source={require('./img/read_icon.png')} style={styles.readIcon}/>
                                <Text style={styles.readNum}>{item.read_number}</Text>
                            </View>
                        </View>
                        <View>
                            <Text numberOfLines={1} style={styles.title}>{item.title}</Text>
                        </View>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

const styles = StyleSheet.create({
    item: {
        backgroundColor: '#fff',
        padding: 10
    },
    img: {
        width: width - 20,
        height: (width - 20) * .54
    },
    info: {
        paddingTop: 10
    },
    infoTop: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    maskWrap: {
        borderRadius: 30,
        backgroundColor: '#fddedb'
    },
    mask: {
        fontSize: 9,
        paddingLeft: 12,
        paddingRight: 12,
        paddingTop: 3,
        paddingBottom: 3,
        color: '#f3301c'
    },
    readNumWrap: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    readIcon: {
        width: 12,
        height: 8,
        marginRight: 5
    },
    readNum: {
        color: '#989898',
        fontSize: 9
    },
    title: {
        color: '#56464a',
        fontSize: 12,
        marginTop: 6
    }
});
